<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <div>
          <p>{{ newsData.title }}</p>
          <span>资讯编号：{{ newsData.newsId }}</span> <span>作者：{{ newsData.author }}</span>
          <p>异常类型： {{ newsData.abnormalType }}</p>
        </div>
      </el-col>
      <el-col
        :span="8"
      >
        <div>
          <el-select v-model="value">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button :loading="sumbitLoading" :disabled="sumbitLoading" type="primary" @click="changeState">确定</el-button>
        </div>
      </el-col>
      <el-col :span="4">
        <el-button type="danger" plain @click="goBack">返回上一页</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <span>查询时间：</span>
        <el-date-picker v-model="datePicker" :picker-options="pickerOptions" size="mini" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" style="width:250px"/>
        <el-button icon="el-icon-search" type="primary" size="mini" @click="search">搜索</el-button>
        <span class="tip">时间间隔不能超过七天</span>
      </el-col>
    </el-row>
    <el-row style="padding-top:10px;">
      <el-col>
        <span>增速:</span>
        <el-radio-group v-model="speedUp" size="mini" @change="speedChange">
          <el-radio-button label="one">1分钟</el-radio-button>
          <el-radio-button label="five">5分钟</el-radio-button>
          <el-radio-button label="ten">10分钟</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <div
      id="main"
      style="width: 1000px;height:400px; padding-top:20px;"
    />
    <el-row class="p-t-40">
      <span>IP重复访问量</span>
      <el-button
        class="fr"
        type="primary"
        size="small"
        @click="checkDetail(1)"
      >查看详情</el-button>
    </el-row>
    <el-table
      :data="tableData1"
      highlight-current-row
      border
    >
      <el-table-column
        prop="id"
        label="序号"
      />
      <el-table-column
        prop="id"
        label="IP"
      />
      <el-table-column
        prop="id"
        label="访问量"
      />
      <el-table-column
        prop="id"
        label="是否异常"
      />
    </el-table>

    <el-row class="p-t-40">
      <span>设备访问重复量</span>
      <el-button
        class="fr"
        type="primary"
        size="small"
        @click="checkDetail(2)"
      >查看详情</el-button>
    </el-row>
    <el-table
      :data="tableData2"
      highlight-current-row
      border
    >
      <el-table-column
        prop="id"
        label="序号"
      />
      <el-table-column
        prop="id"
        label="设备号"
      />
      <el-table-column
        prop="id"
        label="访问量"
      />
      <el-table-column
        prop="id"
        label="是否异常"
      />
    </el-table>

    <el-row class="p-t-40">
      <span>账户异常</span>
      <el-button
        class="fr"
        type="primary"
        size="small"
        @click="checkDetail(3)"
      >查看详情</el-button>
    </el-row>
    <el-table
      :data="tableData3"
      highlight-current-row
      border
    >
      <el-table-column
        prop="id"
        label="序号"
      />
      <el-table-column
        prop="id"
        label="访问的异常账户个数"
      />
      <el-table-column
        prop="id"
        label="是否异常"
      />
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible1"
      width="60%"
    >
      <!-- IP访问重复量 -->
      <el-table
        v-if="tableType==1"
        :data="tableData4"
        highlight-current-row
        border
      >

        <el-table-column
          prop="id"
          label="序号"
        />
        <el-table-column
          prop="id"
          label="IP"
        />
        <el-table-column
          prop="id"
          label="账号ID"
        />
        <el-table-column
          prop="id"
          label="是否异常"
        />
      </el-table>
      <!-- 设备访问重复量 -->
      <el-table
        v-if="tableType==2"
        :data="tableData4"
        highlight-current-row
        border
      >

        <el-table-column
          prop="id"
          label="序号"
        />
        <el-table-column
          prop="id"
          label="设备号"
        />
        <el-table-column
          prop="id"
          label="账号ID"
        />
        <el-table-column
          prop="id"
          label="是否异常"
        />
      </el-table>
      <!-- 账户异常 -->
      <el-table
        v-if="tableType==3"
        :data="tableData4"
        highlight-current-row
        border
      >

        <el-table-column
          prop="id"
          label="序号"
        />
        <el-table-column
          prop="id"
          label="账号ID"
        />
        <el-table-column
          prop="id"
          label="昵称"
        />
        <el-table-column
          prop="id"
          label="状态"
        />
      </el-table>
      <el-row>
        <el-col>
          <div class="block fr">
            <el-pagination
              :current-page="listQuery4.index"
              :page-sizes="[20, 50, 100]"
              :page-size="listQuery4.size"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts';
import {
  getNewsDetailApi,
  getIpViewCountApi
} from '@/api/forewarningManagement.js';
export default {
  data() {
    return {
      title: '',
      speedUp: 'one',
      dialogVisible1: false,
      datePicker: [

      ], // 日期选择
      pickerMinDate: '', // 时间选择限制
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime();
          if (maxDate) {
            this.pickerMinDate = '';
          }
        },
        disabledDate: time => {
          if (this.pickerMinDate !== '') {
            const day = (7 - 1) * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day;
            if (maxTime > new Date()) {
              maxTime = new Date();
            }
            return time.getTime() > maxTime;
          }
          return time.getTime() > Date.now();
        }
      },
      value: '',
      options: [{
        value: '解除异常',
        label: '解除异常'
      }, {
        value: '拉黑',
        label: '拉黑'
      }],
      tableData1: [{
        id: 7777
      }],
      tableData2: [{
        id: 7777
      }],
      tableData3: [{
        id: 7777
      }],
      tableData4: [{
        id: 7777
      }],
      total: 0,
      shareQuery: {
        beginTime: null,
        endTime: null,
        news_id: null
      },
      listQuery1: {
        size: 20,
        index: 1
      },
      listQuery2: {
        size: 20,
        index: 1
      },
      listQuery3: {
        size: 20,
        index: 1
      },
      listQuery4: {
        size: 20,
        index: 1
      },
      tableType: 1,
      dataNameArr: ['阅读', '点赞', '评论', '分享', '收藏'],
      echartQuery: {
        startTime: '',
        endTime: '',
        speedUp: ''
      },
      sumbitLoading: false,
      newsData: {
        'newsId': 34545,
        'author': '捋清思路',
        'abnormalType': 1,
        'title': '盘点各种爆笑奇葩“车祸”，第一张绝了，最后一张简直没谁了'
      }
    };
  },
  created() {
    this.shareQuery.news_id = this.$route.query.id;
    this.init();
  },
  methods: {
    init() {
      this.getNewsDetail();
      this.getList1();
      this.getList2();
      this.getList3();
      this.$nextTick(function() {
        this.getEcharts();
      });
    },
    getEcharts() {
      let readData = [];
      let likeData = [];
      let commentData = [];
      let shareData = [];
      let colletData = [];
      let xData = [];

      readData = [this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000)];
      likeData = [this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000)];
      commentData = [this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000)];
      shareData = [this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000)];
      colletData = [this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000)];
      xData = [this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000), this.randomNum(1, 10000)];

      var myChart = echarts.init(document.getElementById('main'));
      myChart.showLoading();
      const option = {
        title: {
          text: '增速情况'
        },
        legend: {},
        tooltip: {},
        xAxis: { type: 'category', data: xData },
        yAxis: {},
        series: [{
          name: this.dataNameArr[0],
          type: 'line',
          data: readData,
          symbolSize: 12
        }, {
          name: this.dataNameArr[1],
          type: 'line',
          data: likeData,
          symbolSize: 12
        }, {
          name: this.dataNameArr[2],
          type: 'line',
          data: commentData,
          symbolSize: 12
        }, {
          name: this.dataNameArr[3],
          type: 'line',
          data: shareData,
          symbolSize: 12
        }, {
          name: this.dataNameArr[4],
          type: 'line',
          data: colletData,
          symbolSize: 12
        }]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },

    goBack() {
      this.$router.go(-1);
    },

    // IP访问重复量
    getList1() {
      this.tableData1 = [{
        id: 11111
      }];
    },
    // 设备访问重复量
    getList2() {
      getIpViewCountApi();

      this.tableData2 = [{
        id: 22222
      }];
    },
    // 账号访问重复量
    getList3() {
      this.tableData3 = [{
        id: 3333
      }];
    },

    getList4() {
      this.tableData4 = [{
        id: 444444
      }];
    },

    handleSizeChange(val) {
      this.listQuery4.size = val;
      this.getList4();
    },

    handleCurrentChange(val) {
      this.listQuery4.index = val;
      this.getList4();
    },

    getNewsDetail() {
      const obj = {
        news_id: this.shareQuery.news_id
      };
      getNewsDetailApi(obj).then(res => {
        if (res.code == 200) {
          this.newsData = res.data;
        }
      });
    },

    checkDetail(type) {
      this.tableType = type;
      if (type == 1) {
        this.title = 'IP访问重复量';
      } else if (type == 2) {
        this.title = '设备访问重复量';
      }
      if (type == 3) {
        this.title = '账号异常';
      }
      this.dialogVisible1 = true;
      this.listQuery4.index = 1;
      this.getList4();
    },

    search() {
      if (this.datePicker && this.datePicker.length == 2) {
        const start = new Date(this.datePicker[0]).getTime();
        const end = new Date(this.datePicker[1]).getTime();
        if ((end - start) > 6 * 24 * 60 * 60 * 1000) {
          this.$message.warning('时间间隔不能超过七天', true);
          return;
        }
      }
      this.getEcharts();
    },

    speedChange(val) {
      this.search();
    },

    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        default:
          return 0;
      }
    },
    changeState() {
      // this.sumbitLoading = true
    }
  }
};
</script>>

<style lang="scss" scoped>
.fr {
    float: right;
}
.block {
    padding-top: 10px;
}
.p-t-40 {
    padding-top: 40px;
    padding-bottom: 5px;
}
.tip{
	font-size: 12px;
	color: #ccc;
}
span{
	margin-right: 14px;
}
</style>
